import { defineStore } from 'pinia';

export const dynamicFormStore = defineStore({
    id: 'dynamicForm',
    state() {
        return {
            module: '',
            formList: [
                {
                    type: 'input',
                    key: 'name',
                    value: '',
                    label: '单行文本',
                    required: true,
                    rules: [
                        { required: true, message: '', trigger: 'blur' },
                        { patten: null, message: '', trigger: 'blur' }
                    ],
                    config: {
                        placeholder: '请输入',
                        showConfig: [],
                        disabled: true
                    }
                }
            ],
            currentIndex: 0,
            currentType: 'input'
        }
    },
    actions: {
        /**
         * 添加组件
         * @param {
         *      type: 'input': 单行文本, 'select': 下拉选择框, 'radio': 单选框, 'checkbox': 多选框, 'textarea': 文本框, 'editor': 富文本框, 'number': 数字, 'time': 时间, 'timerange': 时间范围, 'date': 日期, 'daterange': 日期范围, 'upload': 上传, 'switch': 开关
         *  }
        */
        addComponet(type) {
            if (type == 'input') { // 单行文本
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '单行文本', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'blur' },
                        { patten: null, message: '', trigger: 'blur' }
                    ],
                    config: { // 组件配置
                        placeholder: '请输入',
                        showConfig: [],
                        disabled: true
                    }
                });
            } else if (type == 'textarea') { // 多行文本
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '多行文本', // 表单行名
                    required: true, // 是否必填
                    rules: [  // 检验规则数组
                        { required: true, message: '', trigger: 'blur' },
                        { patten: null, message: '', trigger: 'blur' }
                    ],
                    config: { // 组件配置
                        placeholder: '请输入',
                        disabled: true,
                        maxlength: 150
                    }
                });
            } else if (type == 'select') { // 下拉选择
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '下拉选择', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        optionType: 'dynamic', // 选项类型 dynamic: 自定义选项, request: '请求'
                        requestUrl: '', // 请求地址
                        labelKey: '', // 显示名-键
                        valueKey: '', // 值-键
                        placeholder: '请选择',
                        disabled: true,
                        multiple: false,
                        optionList: [
                            { label: '选项', value: 1 },
                            { label: '选项', value: 2 },
                        ]
                    }
                });
            } else if (type == 'number') { // 数字
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: 0, // 值
                    label: '数字', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'blur' },
                    ],
                    config: { // 组件配置
                        disabled: true
                    }
                });
            } else if (type == 'radio') { // 单选
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '单选', // 表单行名
                    required: true, // 是否必填
                    rules: [
                        { required: true, message: '', trigger: 'change' },
                    ], // 检验规则数组
                    config: { // 组件配置
                        disabled: true,
                        optionList: [
                            { label: '选项', value: 1 },
                            { label: '选项', value: 2 },
                        ]
                    }
                });
            } else if (type == 'checkbox') { // 多选
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '多选', // 表单行名
                    required: true, // 是否必填
                    rules: [
                        { required: true, message: '', trigger: 'change' },
                    ], // 检验规则数组
                    config: { // 组件配置
                        disabled: true,
                        optionList: [
                            { label: '选项', value: 1 },
                            { label: '选项', value: 2 },
                        ]
                    }
                });
            } else if (type == 'time') { // 时间
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '时间', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        placeholder: '请选择',
                        disabled: true
                    }
                });
            } else if (type == 'timerange') { // 时间范围
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: [], // 值
                    label: '时间范围', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        placeholder: '请选择',
                        disabled: true
                    }
                });
            } else if (type == 'date') { // 日期
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '日期', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        placeholder: '请选择',
                        disabled: true
                    }
                });
            } else if (type == 'daterange') { // 日期范围
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: [], // 值
                    label: '日期范围', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        placeholder: '请选择',
                        disabled: true
                    }
                });
            } else if (type == 'upload') { // 上传文件
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '上传文件', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        limit: 1, // 默认为1个
                        size: 500, // 默认为500M
                        multiple: true,
                        accept: [],
                        disabled: true
                    }
                });
            } else if (type == 'editor') { // 富文本
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: '', // 值
                    label: '富文本', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'blur' },
                    ],
                    config: { // 组件配置
                        placeholder: '请填写',
                        requestUrl: '',
                        disabled: true
                    }
                });
            } else if (type == 'switch') { // 开关
                this.formList.push({
                    type: type, // 类型
                    key: '', // 键
                    value: false, // 值
                    label: '开关', // 表单行名
                    required: true, // 是否必填
                    rules: [ // 检验规则数组
                        { required: true, message: '', trigger: 'change' },
                    ],
                    config: { // 组件配置
                        disabled: true
                    }
                });
            }
        },
        /**
         * 删除组件
         * @param {
         *      index: '下标'
         * }
         */
        delComponent(index) {
            this.formList.splice(index, 1);
        },
        /**
         * 改变当前选择组件下标
         * @param {
         *      index: '下标'
         * }
         */
        changeCurrentIndex(index) {
            this.currentIndex = index;
            this.currentType = this.formList[index].type;
        },
        /**
         * 删除选项
         * @param {
         *      index: 下标
         * }
         */
        delOption(index) {
            this.formList[this.currentIndex].config.optionList.splice(index, 1);
        },
        /**
         * 添加自定义选项
         */
        addOption() {
            let num = this.formList[this.currentIndex].config.optionList.length ? this.formList[this.currentIndex].config.optionList.length + 1 : 1;
            this.formList[this.currentIndex].config.optionList.push(
                { label: '选项', value: num },
            );
        },
        /**
         * 批量修改自定义选项
         * @param {
         *      lst: 修正后的数组
         * }
         */
        batchEditOptionList(lst) {
            this.formList[this.currentIndex].config.optionList = lst;
        },
        /**
         * 删除显示规则
         * @param {
         *      index: 下标
         * }
         */
        delShowRules(index) {
            this.formList[this.currentIndex].config.showConfig.splice(index, 1);
        },
    },
    persist: {
        enabled: true
    }
});